<template>
    <div id="topbutton">
      <x-header @on-click-back="back" :left-options="leftOptions" style="width:100%;position:fixed;left:0;top:0;z-index:100;" slot="header" >实验室设备管理系统
      <x-icon slot="right" type="ios-plus-empty" size="40" class="cell-x-icon" @click="console"></x-icon></x-header>
      <div v-transfer-dom>
        <popup v-model="showPopup" class="checker-popup">
              <apply @click.native="showPopup = false"></apply>
        </popup>
      </div>    
    </div>
</template>
<script>
 import {XHeader, Popup, Actionsheet, TransferDomDirective as TransferDom} from 'vux'
 import apply from './apply.vue'
export default{
   directives: {
     TransferDom
   },
   data () {
     return {
       showPopup: false
     }
   },
   created () {
   },
   computed: {
     leftOptions () {
       return {
         showBack: this.$route.path !== '/index'
       }
     }
   },
   methods: {
     back () {
       console.log(0)
      //  if (this.$route.path === '/equipList') {
       this.$store.dispatch('back', false)
      //  }
     },
     console () {
      //  this.$router.push('/apply')
       this.showPopup = true
     }
   },
   components: {
     Popup,
     XHeader,
     Actionsheet,
     apply
   }
}
</script>
<style scoped>
.vux-x-icon {
  fill: #fff;
  margin-right: -10px;
  margin-top: -10px;

}
.cell-x-icon {
  display: block;
  fill: #fff;
}

.demo4-item {
  background-color: #ddd;
  color: #222;
  font-size: 14px;
  padding: 5px 10px;
  margin-right: 10px;
  line-height: 18px;
  border-radius: 15px;
}
.demo4-item-selected {
  background-color: #FF3B3B;
  color: #fff;
}
.demo4-item-disabled {
  color: #999;
}
</style>
